<template>
  <div class="charge-container" id="chargeContainer">
    <div class="charge">
      <h2 style="text-align: center;">送货单</h2>
      <div class="table-head">
        <div>收货单位：<span style="text-decoration:underline ;">{{ data.receiveName }}</span></div>
        <div style="font-size:20px">NO. <span style="color: red;">{{ data.trackingNumber }}</span></div>
      </div>
      <div class="table-head">
        <div>收货地址：<span style="text-decoration:underline ;">{{ data.adress }}</span></div>
        <div><span style="text-decoration:underline ;">{{ data.year }}</span>年<span style="text-decoration:underline ;">{{
          data.month }}</span>月<span style="text-decoration:underline ;">{{ data.day }}</span>日</div>
      </div>
      <table class="charge-table" id="my-table">
        <tr>
          <td style="width:100px">
            货号
          </td>
          <td style="width:150px">
            名称及规格
          </td>
          <td style="width:150px">
            单位
          </td>
          <td style="width:150px">
            数量
          </td>
          <td style="width:150px">
            单价（元/件）
          </td>
          <td style="width:150px">
            <table style="border: none">
              <tr style="border-bottom: 1px solid #bab9b9">
                <td style="border: none">金&nbsp;&nbsp;额&nbsp;&nbsp;&nbsp; </td>
              </tr>
              <tr>
                <td style="border: none">
                  <table class="debtor-lender-table" style="height: 100%">
                    <tr>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">千</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">百</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">十</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">万</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">千</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">百</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">十</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">元</td>
                      <td style="border: none ;border-right: 1px solid #bab9b9 !important">角</td>
                      <td style="border: none">分</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr v-for="(item, index) in  data.infoList ">
          <td>{{ index + 1 }}</td>
          <td>{{ item.ProductName }}</td>

          <td>个</td>

          <td>
            {{ item.Quantity }}
          </td>
          <td>{{ item.Price }}</td>
          <td style="padding:0px !important">
            <span class="money">{{ item.totalArray[0] }}</span>
            <span class="money">{{ item.totalArray[1] }}</span>
            <span class="money">{{ item.totalArray[2] }}</span>
            <span class="money">{{ item.totalArray[3] }}</span>
            <span class="money">{{ item.totalArray[4] }}</span>
            <span class="money">{{ item.totalArray[5] }}</span>
            <span class="money">{{ item.totalArray[6] }}</span>
            <span class="money">{{ item.totalArray[7] }}</span>
            <span class="money">{{ item.totalArray[8] }}</span>
            <span class="money1">{{ item.totalArray[9] }}</span>
          </td>
        </tr>
        <tr>
          <td>合计金额（大写）</td>
          <td colspan="5">共计：{{ data.totalMoney }}元({{ data.totalAmountInWords }})
          </td>


        </tr>
      </table>
      <div class="DispatchForm_date">
        <ul>
          <span class="mySignet" id="view_FQX2"></span>
          <li>收货单位（盖章）
            <el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet1"
              v-if="!isSealDelivery && Showtype !== 'onlyCheck'"></el-button>
          </li>
        </ul>
        <ul>
          <span class="mySignet" id="view_FQX1"></span>
          <li>送货单位（盖章）
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
 
<script>
import { ref, watch, reactive, nextTick } from 'vue';
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EStamp from "@iconify-icons/ep/stamp";
import { FXQ } from "@/utils/public/FXQ"
import { emitter } from "@/utils/mitt";
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    Showtype: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const mapping = reactive({
      "0": "零",
      "1": "壹",
      "2": "貮",
      "3": "叄",
      "4": "肆",
      "5": "伍",
      "6": "陆",
      "7": "柒",
      "8": "捌",
      "9": "玖"
    });
    const isSealDelivery = ref(false)
    const isSealDelivery1 = ref(false)
    const totalBig = ref(); //大写
    const totalBigArray = ref([])
    totalBig.value = transform(props.data.totalMoney)
    totalBig.value = splitNumber(totalBig.value)
    totalBig.value.forEach(item => {
      totalBigArray.value.push(mapping[item])
    })
    let dateArr = props.data.shipDate.split("-");
    props.data.year = dateArr[0];
    props.data.month = dateArr[1]
    props.data.day = dateArr[2]
    props.data.infoList.forEach(item => {
      item.totalArray = transform(item.total)
      item.totalArray = splitNumber(item.totalArray)
    })
    nextTick(() => {
      Signet()

      if (props.Showtype == 'showDetail') {
        Signet1()
      }
    })
    //把数字转成七位数加.00
    function transform(number) {
      var str = number.toString();
      // 判断是否需要添加前导零
      if (str.length < 8) {
        str = "0".repeat(8 - str.length) + str;
      }
      // 添加小数点和两位小数
      str += ".00";

      return str;
    }

    function splitNumber(str) {
      str = str.replace(".", "");
      // 将字符串切割成单个数字的数组
      var arr = str.split("");
      return arr;
    }

    function Signet() {
      // // 生成章
      const MYFXQ = FXQ.companySeal(props.data.deliverName, 0, 0, '', '');
      let view_FQX = document.querySelector("#view_FQX1");
      let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
      view_FQX.innerHTML = MYFQX;
    }


    function Signet1() {
      // // 生成章
      const MYFXQ = FXQ.companySeal(props.data.receiveName, 0, 0, '', '');
      let view_FQX = document.querySelector("#view_FQX2");
      let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
      view_FQX.innerHTML = MYFQX;
      isSealDelivery.value = true
      emitter.emit("InboundConfirm");
    }
    return {
      totalBigArray,
      isSealDelivery,
      useRenderIcon,
      EStamp,
      Signet,
      Signet1
    };
    //把数字转为中文
  }
};
</script>

<style scoped lang="scss" >
.charge {
  width: 90%;
  margin: auto;
}

//@at-root
.table-head {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

#my-table,
#my-table th,
#my-table td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
  height: 35px;
}

.money {
  display: inline-block;
  width: 10%;
  border-right: 1px solid #bab9b9;
  height: 35px;
  line-height: 35px;
}

.money1 {
  display: inline-block;
  width: 9%;
  border-right: 1px solid #eee;
  height: 35px;
  line-height: 35px;
}

.charge-table {
  position: relative;
  text-align: center;
}

.left-text {
  display: flex;
  flex-direction: row;
  position: absolute;
  left: -150px;
  top: 280px;
  transform: rotate(90deg);
}

.right-text {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: -150px;
  top: 280px;
  transform: rotate(90deg);
}


.fw-700 {
  font-size: 15px;
  font-weight: 800;
}

.DispatchForm_date {
  display: flex;
  border: 1px solid #ebeef5;
  border-top: none;

  ul {
    width: 50%;
    text-align: left;
    position: relative;

    li {
      line-height: 32px;
    }
  }
}

.mySignet {
  position: absolute;
  width: 130px;
  height: 130px;
  left: 13%;
  top: -100%;
}
</style>
